<template>
    <el-container class="home">  <!--外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列-->
        <!-- 头部 -->
        <el-header>
            <div class="logo">
                <img class="shopicon" src="../../assets/img/shop.jpg" alt="">
                <span>文理Green超市</span>
            </div>
            <el-autocomplete
                    class="inline-input"
                    v-model="select"  hide-loading
                    placeholder="请输入想要的实鲜"
                    @select="handleSelect">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-autocomplete>
            <div class="user">
                <span>{{user.userNickname}}</span>
                <span v-show="!this.loginFlag" @click="toLogin()">您好！请登录！  游客9527</span>
                <el-badge v-show="loginFlag" :value="1" :max="99" class="item"><img src="@/assets/img/userimg.png" class="user-img" ref="img" @click="showSetting()"/></el-badge>
                <transition name="fade">
                    <div style="z-index: 100" class="out" ref="out" v-show="viewFlag">  <!--如果登录了就显示-->
                        <ul>
                            <li @click="goUserSetting()"><a href="javascript:;">个人资料</a></li>
                            <li @click="goShoppingCart()"><el-badge :value="1" :max="99" class="item"><a  href="javascript:;">购物车</a></el-badge></li>
                            <li @click="goMyOrder()"><a href="javascript:;">我的订单</a></li>
                            <li><a href="javascript:;">我的收藏</a></li>
                            <li class="exit" @click="exit()"><a href="javascript:;">退出登录</a></li>
                        </ul>
                    </div>
                </transition>
            </div>
        </el-header>
        <!-- 导航 -->

        <el-tabs style="width: auto;margin-left: -25px"   v-model="activeName" type="card" @tab-click="change(activeName)" >
            <el-tab-pane    v-for="(cate,index) in categorys" :label="cate.categoryName" :name="cate.categoryId.toString()"></el-tab-pane>
        </el-tabs>

        <el-main>   <!--主要区域栏-->
            <goods :goods.sync="this.goods" :productPictures.prop="this.productPictures"></goods>
            <router-view></router-view>
        </el-main>
        <el-footer><!--底栏容器-->

        </el-footer>
    </el-container>

</template>

<script>
    import Goods from "./goods";
    export default {
        components: {Goods},
        data() {
            return {
                user: {
                    userNickname: '',
                    userId: null
                },
                activeName:'2',
                munList: '',
                detail:'',  //判断是否是detail页面
                iconsObj: {
                    125: 'iconfont icon-user',
                    103: 'iconfont icon-tijikongjian',
                    101: 'iconfont icon-shangpin',
                    102: 'iconfont icon-danju',
                    145: 'iconfont icon-baobiao'
                },
                goods: [{productPicture:''}],
                productPictures:[],
                categorys : [],
                select: '',//与搜索框绑定
                viewFlag: false, // 折叠标签
                width: '200px', // 左侧导航栏菜单
                activePath: '' ,// 当前选中的页签激活页签
                loginFlag: false,
            }
        },
        methods: {
            getUserInfo() { //获取用户信息
                let userNickname = this.$cookies.get("nickName")
                let userId = this.$cookies.get("id")
                this.user.userNickname = userNickname
                this.user.userId = userId
                this.loginFlag = userId ? true :false
            },
             getCategoryInfo() { //查询种类
                 this.$axios.get("/api/category").then(res => { //将已有种类集合拿到
                    this.categorys = res.data
                    console.log("返回的页面数据", this.categorys)
                }).catch(error => {
                })
            },
             change (tab,event) {  //选择标签，发送请求
                console.log("传给后端的tab数据",tab)
                this.$axios.get(`/api/product/findByCategoryId/${tab}`).then(async res => {
                    if (res.status === 200){
                        this.productPictures = []
                        let goods = res.data
                        let goodRows = []
                        let goodsCol = []
                        let productPirtures = []
                        for (let i = 1; i < goods.length+1; i++) {
                          await     this.$axios.get(`/api/productImage/${goods[i-1].productId}`).then( res => {
                                if (res.status === 200){
                                     goods[i-1].productPicture = res.data[0].productImageSrc
                                    productPirtures.push(res.data[0].productImageSrc)
                                    console.log('产品图片',goods[i-1].productPicture)
                                }else {
                                    console.log(goods[i-1].productId+'没有查出有图片')
                                }
                            })
                            goodsCol.push(goods[i-1])
                            if (i%4 == 0 || (goods.length+1-i<4 && goodsCol.length == goods.length%4)){
                                goodRows.push(goodsCol)
                                goodsCol=[]
                            }
                        }
                        this.goods=goodRows
                        this.productPictures=productPirtures
                        console.log("传递的goods", this.goods)
                        console.log("传递的pictures", this.productPictures)
                    }
                }).catch(res => {      //查询失败
                })
            },
            //显示、隐藏个人信息
            showSetting() {
                this.viewFlag = !this.viewFlag
            },
            exit() {   //使用cookies实现
                let role = this.$cookies.get("region")
                this.$router.push({name: 'Login', params: {region: role}}) //跳转到登录页面
                this.$cookies.remove("nickName") //清除cookie
                this.$cookies.remove("id")
                this.$cookies.remove("region")
            },
            // exit () {//使用session实现
            //     sessionStorage.clear()
            //     // sessionStorage.setItem('token', '')
            //     this.$router.push('/login')
            // },
            openClose() {
                this.flage = !this.flage
                this.width = this.flage ? '64px' : '200px'
            },
            choosePath(path) { // 保存二级菜单的激活状态
                sessionStorage.setItem('path', path) // ssession保存
                this.activePath = path // 赋值给变量数据层和视图层绑定了，所以会变化
            },

            createFilter(queryString) {
                return (good) => {
                    return (good.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            toLogin() {
                this.$router.push({name:"Login",params:{region:'用户'}}) //跳转到登录页面
            },

            handleSelect(item) {
                console.log(item);
            },
            goShoppingCart(){
                console.log("跳转购物车")
                this.$router.push({name:"ShoppingCart"}) //跳转到购物车页面
            },
            goMyOrder(){
                console.log("跳转订单页面")
                this.$router.push({name:"MyOrder"}) //跳转到购物车页面
            },
            goUserSetting(){
                this.$router.push({name:"UserSetting"}) //跳转到购物车页面
            },
        },
        mounted() {
            this.change(2,1);

        },
        created() {
            this.getUserInfo();
            this.getCategoryInfo();
        },
    }
</script>

<style scoped>
    .el-header {
        display: flex;
        justify-content: space-between;
        background-color: #363c42;
        color: #fff;
        font-size: 20px;
    }
    div {
              display: flex;
              align-items: center;
          }
    span {
        padding-right: 30px;
    }
    .user-img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
    .user {
        position: relative;
        margin-right: 40px;
        display: flex;
    }
    .user > span {
        cursor: pointer; /*该样式可以将默认箭头样式变为手指样式*/

    }
    .el-footer {

    }
    .shopicon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }


    .el-main {
        background-color: #e9edf1;
    }

    .el-container {
        height: 100%;
    }

    .icof {
        margin-left: 10px;
    }

    .openClose {
        background-color: #4a5064;
        color: #fff;
        font-size: 12px;
        text-align: center;
        line-height: 22px;
        height: 22px;
        cursor: pointer;
        letter-spacing: .12em;

    }
    .el-menu {
        border-right: none;
    }
    .user .out {
        font-size: 10px;
        position: absolute;
        top: 60px;
        right: -10px;
        background-color: rgb(6, 4, 5);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(18, 66, 128, 0.76);
        padding: 5px;
    }
    .user .out ul {
        list-style: none;
    }
    .user .out ul > li {
        height: 30px;
        line-height: 30px;
    }
    .out a {
        text-decoration: none;
        color: #fefefe;
    }
    .out .exit {
        margin-top: 4px;
        padding-top: 4px;
        border-top: 1px solid #ccc;
    }
    .nat{
        top: 50%;  /*内容居中*/
        transform: translateY(-50%);
        display: flex;

    }
    /*标签页的样式*/
    /deep/.el-tabs{
        background-color: #fff;
        padding: 20px 0 0 20px;
        margin: 0 auto;
        text-align: center;
    }
    /deep/.el-tabs__item{
        width: 190px;
        font-size: 3px ;
        font-weight: 600;
        color: #808080;
    }
    /deep/.el-tabs__active-bar{
        height: 0;
    }
    /deep/.el-tabs__item.is-active{
        color: #409EFF;
    }

    /deep/ .el-badge__content {
       margin-top: 15px;
    }





</style>
